<style>
input{
background:lightgreen;
border:2 px solid red;
font-size:30px;
}

#clickId{
  cursor:pointer;
  color:blue;

}
.row{
border:5px solid blue;margin:5px;
}
</style>
<script src="lib.js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

  $('#triggerId').on('click',function(){
    $('#clickId').trigger('click');

  })



  $('#clickId').on('click', function(){
    console.log('22');
    var html  = $('#container').find('.row:first').clone();
     $(html).find('input').val('');
     $(html).find('input').prop('placeholder',"Hi");
    $('#container').append(html);

  });

  $('#container').on('click','.close', function(){
  // $(this).prev().remove();
  // $(this).remove();

   $(this).closest('.row').remove();

  });
});


</script>

<span id="clickId">Click Here</span>

<div id="container" style="width:350px;border:5px solid green;margin:5px;">

  <div class="row" >
    <input type="password" >
    <a class="close" href="#">X</a>
  </div>

</div>


<span id="triggerId">Check Trigger</span>
